<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 
      1.margin叠加（合并）

         1.1 当上下margin同时存在时，就会出现叠加的问题。这个问题，只在上下有，左右是没有叠加问题的

         1.2 叠加后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

      2.margin传递
         2.1 margin传递问题只会出现在嵌套的的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递问题的。

         2.2 解决方案
            a) BFC规范
            b) 给父容器加边框
            c) 子容器的margin换成父容器的padding（感觉很勉强？）
      
      3. margin自适应
         margin可以左右自适应居中，但上下自适应（目前知识）是不行的

      4.设置width和height
         不设置width和height的时候，对盒子模型的影响：
         不设置width时系统会自动去计算容器的大小，且不会超出父容器范围，省去了自己运算的步骤，也节省了代码。

   -->

   <style>
      /* 1 margin叠加（合并）*/
      /* #div1{
         width: 100px;
         height: 100px;
         background-color: red;
         margin-bottom: 30px;
      }
      #div2{
         width: 200px;
         height: 200px;
         background-color: green;
         margin-top: 20px;
      } */

      /* 2.margin传递 */
      /* #div1{
         width: 200px;
         height: 200px;
         background-color: red;
      }
      #div2{
         width: 100px;
         height: 100px;
         background-color: green;
         margin-top: 100px;
         margin-left: 100px;
      } */
      
      /* 2.1 margin 传递解决方案--给父容器加边框 */
       /* #div1{
         width: 200px;
         height: 200px;
         background-color: red;
         border: 1px black solid;
      }
      #div2{
         width: 100px;
         height: 100px;
         background-color: green;
         margin-top: 100px;
      } */

       /* 2.2 margin 传递解决方案--父容器用padding
         注意，这里用了padding-top后视觉上变成了长方形的红色方块，这是因为，padding border content颜色是一样的
       */
       /* #div1{
         width: 200px;
         height: 100px;
         background-color: red;
         padding-top: 100px;
      }
      #div2{
         width: 100px;
         height: 100px;
         background-color: green;
         
      } */

      /* 3. margin自适应  */
      div{
         width: 200px;
         height: 100px;
         background-color: red;
         margin: 0 auto;
         
      }

   </style>

</head>
<body>
   <!-- 1. margin叠加（合并）  -->
   <!-- <div id="div1">11111111111</div>
   <div id="div2">22222222222</div> -->

   <!-- 2.margin传递 -->
   <!-- <div id="div1">
      <div id="div2"></div>
   </div> -->

   <!--  3. margin自适应 -->
   <div>qqqqq</div>
  
</body>
</html>